var myChart = echarts.init(document.getElementById("show1"));
// var myChart2 = echarts.init(document.getElementById("show2"));
// 在这里定义变量  用来接收返回的全部数据！
// 城市
var city_bar_x_list;
var city_bar_y_list;

//学历
var education;

//薪资分布
var salary_x_list;
var salary_y_list;

//工作经验
var experience_x_list;
var experience_y_list;

//技能要求
var requirement;

//公司福利
var benifits;

//公司名称的变量
var company_data;

//公司领域的变量
var profession;

window.onload = (function () {
    $.ajax({
        url: '/analyze/getData/',
        type: 'GET',
        data: {
            //这里要还回来  换成框框里的词
            'keyword': '会计',
        },
        success: function (arg) {
            city_bar_x_list = arg.location.categories;
            city_bar_y_list = arg.location.data;
            education = arg.education;
            salary_x_list = arg.salary.categories;
            salary_y_list = arg.salary.data;
            experience_x_list = arg.experience.categories;
            experience_y_list = arg.experience.data;
            requirement = arg.requirement;
            benifits = arg.benifits;
            company_data = arg.company;
            profession = arg.profession;
            console.log(arg)
            // 先展示城市分布的数据
            var option = {
                title: {
                    text: ("城市分布数量图")
                },
                tooltip: {},
                legend: {
                    data: ['城市数量']
                },
                xAxis: [
                    {
                        boundaryGap: true,
                        axisLine: {
                            show: true,
                            width: 1,
                        },
                        axisLabel: { //设置x轴的字
                            show: true,
                            interval: 0,
                            rotate: 20
                        },

                        data: city_bar_x_list
                    }],
                yAxis: {},
                dataZoom: [{
                    type: 'slider',
                    orient: 'horizontal',
                    start: 0,
                    end: 10,
                    filterMode: 'empty',
                    showDetail: false,
                    show: true
                }],
                grid: {
                    bottom: "100px"
                },
                series: [{
                    name: '城市数量',
                    type: "bar",
                    data: city_bar_y_list,
                }]
            };
            myChart.setOption(option);
        }
    })
});
//城市
document.getElementById('cities').onclick = function () {
    var option = {
        title: {
            text: ("城市分布数量图")
        },
        tooltip: {},
        legend: {
            data: ['城市数量']
        },
        xAxis: [
            {
                show: true,
                boundaryGap: true,
                axisLine: {
                    show: true,
                    width: 1,
                },
                axisLabel: { //设置x轴的字
                    show: true,
                    interval: 0,
                    rotate: 20
                },

                data: city_bar_x_list
            }],
        yAxis: {show: true},
        dataZoom: [{
            type: 'slider',
            orient: 'horizontal',
            start: 0,
            end: 10,
            filterMode: 'empty',
            showDetail: false,
            show: true
        }],
        grid: {
            bottom: "100px"
        },
        series: [{
            name: '城市数量',
            type: "bar",
            data: city_bar_y_list,
        }]
    };
    myChart.setOption(option);
}
//学历
document.getElementById('educations').onclick = function () {
    var option = {
        title: {
            text: '学历要求分布图',
        },
        yAxis: {show: false,},
        xAxis: {show: false,},
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // legend: {
        //     orient: 'vertical',
        //     left: 'center',
        //     data: [
        //         ],
        // },
        series: [
            {
                name: '学历',
                type: 'pie',
                radius: '55%',
                center: ['50%', '40%'],
                data: education,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
}
//薪资
document.getElementById('salary_list').onclick = function () {
    var option = {
        title: {
            text: ("薪资分布图")
        },
        tooltip: {},
        legend: {
            data: ['薪资分布']
        },
        xAxis: [
            {
                show: true,
                boundaryGap: true,
                axisLine: {
                    show: true,
                    width: 1,
                },
                axisLabel: { //设置x轴的字
                    show: true,
                    interval: 0,
                    rotate: 20
                },
                data: salary_x_list
            }],
        yAxis: {show: true,},
        dataZoom: [{
            type: 'slider',
            orient: 'horizontal',
            start: 0,
            end: 10,
            filterMode: 'empty',
            showDetail: false,
            show: true
        }],
        grid: {
            bottom: "100px"
        },
        series: [{
            name: '薪资分布',
            type: "bar",
            data: salary_y_list,
        }]
    };
    myChart.setOption(option);
}
//工作经验
document.getElementById('work_year_list').onclick = function () {
    var option = {
        title: {
            text: ("工作经验分布图")
        },
        tooltip: {},
        legend: {
            data: ['工作经验']
        },
        xAxis: [
            {
                show: true,
                boundaryGap: true,
                axisLine: {
                    show: true,
                    width: 1,
                },
                axisLabel: { //设置x轴的字
                    show: true,
                    interval: 0,
                    rotate: 20
                },
                data: experience_x_list
            }],
        yAxis: {show: true,},
        dataZoom: [{
            type: 'slider',
            orient: 'horizontal',
            start: 0,
            end: 100,
            filterMode: 'empty',
            showDetail: false,
            show: true
        }],
        grid: {
            bottom: "100px"
        },
        series: [{
            name: '工作经验',
            type: "bar",
            data: experience_y_list,
        }]
    };
    myChart.setOption(option);
}
// 技能要求
document.getElementById('company_label_list').onclick = function () {
    var maskImage = new Image();
    maskImage.src = '/static/img/map.png';
    var option = {
        title: {
            text: ('技能要求'),//标题
            x: 'left',
        },
        backgroundColor: '#F7F7F7',
        // imageShape: '/static/image/love.jpg',
        fontSizeFactor: 0.1,
        maxFontSize: 60,                                        // 最大fontSize，用来控制weightFactor，默认60
        minFontSize: 12,                                        // 最小fontSize，用来控制weightFactor，默认12
        tooltip: {
            show: true,                                         // 默认：false
        },
        yAxis: {show: false,},
        xAxis: {show: false,},
        series: [{
            name: '技能',//数据提示窗标题
            type: 'wordCloud',
            // gridSize: 10,
            sizeRange: [12, 50],//画布范围，如果设置太大会出现少词（溢出屏幕）
            rotationRange: [-45, 90],//数据翻转范围
            // maskImage: maskImage,
            shape: 'circle',
            textPadding: 0,
            autoSize: {
                enable: true,
                minSize: 6
            },
            // drawOutOfBound:true,
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    },
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#aaa'
                }
            },
            data: requirement
        }]
    };
    maskImage.onload = function () {
        myChart.setOption(option);
    };
}

//公司福利
document.getElementById('position_advantage').onclick = function () {
    var maskImage = new Image();
    maskImage.src = '/static/img/map.png';
    var option = {
        title: {
            text: ('公司福利'),//标题
            x: 'left',
        },
        backgroundColor: '#F7F7F7',
        // imageShape: '/static/image/love.jpg',
        fontSizeFactor: 0.1,
        maxFontSize: 60,                                        // 最大fontSize，用来控制weightFactor，默认60
        minFontSize: 12,                                        // 最小fontSize，用来控制weightFactor，默认12
        tooltip: {
            show: true,                                         // 默认：false
        },
        yAxis: {show: false,},
        xAxis: {show: false,},
        series: [{
            name: '福利',//数据提示窗标题
            type: 'wordCloud',
            // gridSize: 10,
            sizeRange: [12, 50],//画布范围，如果设置太大会出现少词（溢出屏幕）
            rotationRange: [-45, 90],//数据翻转范围
            // maskImage: maskImage,
            shape: 'circle',
            textPadding: 0,
            autoSize: {
                enable: true,
                minSize: 6
            },
            // drawOutOfBound:true,
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    },
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#aaa'
                }
            },
            data: benifits
        }]
    };
    maskImage.onload = function () {
        myChart.setOption(option);
    };
}
//公司名称
document.getElementById('company_name_list').onclick = function () {
    var maskImage = new Image();
    maskImage.src = '/static/img/map.png';
    var option = {
        title: {
            text: ('公司名称'),//标题
            x: 'left',
        },
        backgroundColor: '#F7F7F7',
        // imageShape: '/static/image/love.jpg',
        fontSizeFactor: 0.1,
        maxFontSize: 60,                                        // 最大fontSize，用来控制weightFactor，默认60
        minFontSize: 12,                                        // 最小fontSize，用来控制weightFactor，默认12
        tooltip: {
            show: true,                                         // 默认：false
        },
        yAxis: {show: false,},
        xAxis: {show: false,},
        series: [{
            name: '公司',//数据提示窗标题
            type: 'wordCloud',
            // gridSize: 10,
            sizeRange: [12, 50],//画布范围，如果设置太大会出现少词（溢出屏幕）
            rotationRange: [-45, 90],//数据翻转范围
            // maskImage: maskImage,
            shape: 'circle',
            textPadding: 0,
            autoSize: {
                enable: true,
                minSize: 6
            },
            // drawOutOfBound:true,
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    },
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#aaa'
                }
            },
            data: company_data
        }]
    };
    maskImage.onload = function () {
        myChart.setOption(option);
    };
}

//公司领域
document.getElementById('industry_field').onclick = function () {
    var maskImage = new Image();
    maskImage.src = '/static/img/map.png';
    var option = {
        title: {
            text: ('公司领域'),//标题
            x: 'left',
        },
        backgroundColor: '#F7F7F7',
        // imageShape: '/static/image/love.jpg',
        fontSizeFactor: 0.1,
        maxFontSize: 60,                                        // 最大fontSize，用来控制weightFactor，默认60
        minFontSize: 12,                                        // 最小fontSize，用来控制weightFactor，默认12
        tooltip: {
            show: true,                                         // 默认：false
        },
        yAxis: {show: false,},
        xAxis: {show: false,},
        series: [{
            name: '领域',//数据提示窗标题
            type: 'wordCloud',
            // gridSize: 10,
            sizeRange: [12, 50],//画布范围，如果设置太大会出现少词（溢出屏幕）
            rotationRange: [-45, 90],//数据翻转范围
            // maskImage: maskImage,
            shape: 'circle',
            textPadding: 0,
            autoSize: {
                enable: true,
                minSize: 6
            },
            // drawOutOfBound:true,
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    },
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#aaa'
                }
            },
            data: profession
        }]
    };
    maskImage.onload = function () {
        myChart.setOption(option);
    };
}
